<template>
  <div class="kmGlobal">
    <el-popover
      v-model="visible"
      width="420"
      trigger="click"
      placement="bottom-start"
      ref="kmGlobalPopover"
      popper-class="kmGlobalPoper plus-popover"
      @show="onPopoverShow"
    >
      <topknowledgeBase @show="showBase" :visible='visible'></topknowledgeBase>
      <span slot="reference">
        <i class="V7_iconfont V7_iconV7tubiao_zhishiku"></i>
      </span>
    </el-popover>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import directoryTree from '@/views/km/knowledgeBase/directoryTree.vue'
import { KmModule } from '@/store/modules/km/index'
import topknowledgeBase from './topknowledgeBase/index.vue'
@Component({
  name: 'kmGlobal',
  components: { directoryTree, topknowledgeBase }
})
export default class KmGlobal extends Vue {
  private $message: any
  private $route: any
  private $bus: any
  private visible = false

  private treeData = []

  private isShowMore = false

  private directory: any = '全部' // 目录标题

  private trigger = 'click'

  private isShowWebchatBtn: boolean = false // 是否显示在线的按钮

  private preview: any = {
    isShow: false,
    content: '',
    title: '',
    _id: ''
  }

  private searchForm: any = {
    keywordsType: 'all',
    keywords: ''
  }

  private selectData = [
    { label: '全部', value: 'all' },
    { label: '标题', value: 'title' },
    { label: '内容', value: 'content' }
  ]

  private konwledgeList: any = []

  private currentId: string = '' // 当前知识点id

  private searchTitle: string = '' // 搜索内容

  private pageData: any = {
    page: 1,
    limit: 10
  }

  @Watch('$route')
  private routeChange (to: any) {
    const routeArr = to.path.split('/') // 只有在在线待处理模块下才显示发送和使用按钮
    if (routeArr[3] === 'webchat_todo' && routeArr.length > 4 && routeArr[4] !== 'empty') {
      this.isShowWebchatBtn = true
    } else {
      this.isShowWebchatBtn = false
    }
  }

  private searchFun () { // 搜索知识点
    this.searchTitle =
      this.searchForm.keywords ? `<span style="color: red">“${this.searchForm.keywords}”</span>相关的搜索结果` : ''
    this.getListData()
  }

  private onPopoverShow () {
    this.visible = true
    this.pageData.page = 1
    this.getListData()
    this.getTreeData()
    this.directory = '全部'
  }

  private kmUse (content: any) { // 知识库使用
    const actionData = { url: '/im-km/action/item/show', method: 'POST', data: { isHit: false, itemId: content._id, kmType: 'inner' } }
    KmModule.KmCommonAction(actionData).then(res => {
      if (res && res.success && res.data.row) {
        this.$bus.$emit('kmUse', res.data.row.content)
      }
    })
  }

  private kmSend (content: any) { // 知识库发送
    const actionData = { url: '/im-km/action/item/show', method: 'POST', data: { isHit: false, itemId: content._id, kmType: 'inner' } }
    KmModule.KmCommonAction(actionData).then(res => {
      if (res && res.success && res.data.row) {
        this.$bus.$emit('sendInfo', res.data.row)
      }
    })
  }

  private previewFun (item: any) { // 知识库预览
    this.preview.isShow = true
    this.preview.content = item.content
    this.preview.title = item.title
    this.preview._id = item._id
  }

  private previewClose () { // 预览关闭
    this.preview.isShow = false
    this.preview.content = ''
    this.preview.title = ''
    this.preview._id = ''
  }

  private nodeClick (data: any, node: any) { // 切换目录
    this.directory = ''
    this.searchForm.keywords = '' // 切换目录清空当前搜索项
    this.searchTitle = ''
    this.getAllTitle(node)
    this.directory = this.directory.substr(0, this.directory.length - 1)
    this.pageData.page = 1
    this.currentId = data._id
    this.getListData({ currentId: data._id })
  }

  private getAllTitle (data: any) { // 处理目录
    if (data.level === 1) {
      this.directory = data.label + '/' + this.directory
      return this.directory
    }
    this.directory = data.label + '/' + this.directory
    if (data.parent) {
      this.getAllTitle(data.parent)
    }
  }

  private getListData (obj?: any) { // 获取知识库列表
    const actionData = {
      url: '/im-km/action/item/list',
      method: 'POST',
      data: {
        catalogId: obj && obj.currentId ? obj.currentId : 'all', // 有当前知识点id取当前id列表否则取全部
        kmType: 'inner',
        page: this.pageData.page,
        limit: this.pageData.limit,
        type: 'global',
        ...this.searchForm
      }
    }
    KmModule.KmCommonAction(actionData).then(res => {
      if (res && res.success) {
        const list = res.data.list || []
        const validArr = list.filter((item: any) => {
          return item.status === 'valid'
        })
        if (obj && obj.more) {
          this.konwledgeList = [...this.konwledgeList, ...validArr]
        } else {
          this.konwledgeList = validArr
        }
        if (list.length < this.pageData.limit) {
          this.isShowMore = false
        } else {
          this.isShowMore = true
        }
      }
    })
  }

  private getTreeData () { // 获取知识库目录列表
    const actionData = { url: '/im-km/action/catalog/list', method: 'POST', data: { kmType: 'inner' } }
    KmModule.KmCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.treeData = res.data.tree || []
      }
    })
  }

  private showBase (force) {
    // this.visible = true;
    (this.$refs as any).kmGlobalPopover.doShow();
  }

  private mounted () {
    const routeArr = this.$route.path.split('/')
    if (routeArr[1] === 'im_workBench' && routeArr.length > 4 && routeArr[4] !== 'empty') {
      this.isShowWebchatBtn = true
    } else {
      this.isShowWebchatBtn = false
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/common/style/common.styl'
.V7_iconV7tubiao_zhishiku
  font-size 18px
  cursor pointer
  color #3d4e66
.kmGlobalPoper
  .btn
    color #008BEE
    cursor pointer
  .preview
    height 500px
    .previewTop
      height 48px
      line-height 48px
      border-bottom 1px solid $border-main
      padding 0px 16px
      .previewLeft
        font-weight 600px
      .close
        color #A6A6AE
        margin-left 10px
        cursor pointer
    .previewContent
      height 440px
      overflow auto
      padding 0px 16px
      .contentTitle
        margin 16px 0px 14px 0px
        font-weight 600
        font-size 14px
        color #303753
  .container
    height 500px
    .top
      border-bottom 1px solid #ECF0F3
      padding 10px
      .V7_iconV7tubiao_zhishiku-zhankai
        color #008BEE
        cursor pointer
      .search
        display inline-block
        margin-left 10px
        width calc(100% - 27px)
        .scopeSelect
          width 80px
          >>>.el-input__inner
            border-right none
            border-radius 4px 0px 0px 4px
        .scopeIpt
          width calc(100% - 80px)
          >>>.el-input__inner
            order-left none
            border-radius 0 4px 4px 0
    .list
      height calc(100% - 70px)
      padding 10px 0px
      .directory
        padding-left 16px
        color #B3B9C7
      .noData
        height 350px
        line-height 350px
        text-align center
        font-size 14px
      .content
        overflow auto
        height 100%
        .item
          padding 16px
          width 100%
          cursor pointer
          border-bottom 1px solid $border-main
          .listFlag
            font-size 14px
            color #008BEE
            margin-right 5px
          .titleItem
            color #303753
            font-weight 600
            margin-bottom 5px
            width calc(100% - 120px)
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .contentItem
            padding-right 10px
            color #71798C
            width 100%
            word-wrap break-word
            display -webkit-box
            -webkit-box-orient vertical
            -webkit-line-clamp 2
            overflow hidden
          .directoryItem
            margin-top 5px
            color #71798c
            width 100%
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .operation
            display none
        .item:hover
          background #F3F6F9
        .item:hover .operation
          display block
        .more
          text-align center
          color #008BEE
          margin-top 10px
          cursor pointer
</style>
<style lang="stylus">
.kmGlobalTree
  max-height 400px
  .el-tree
    max-height 352px
    overflow-y auto
  .el-tree-node__label
    font-size 14px
    max-width 90px
    display inline-block
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .el-tree-node__content
    margin 5px 0px
  .el-tree__empty-block
    min-height 360px
.kmGlobalPoper
  padding 0px !important
  font-size 12px !important
</style>
